<template>
	<view class="container">
		<!-- 店铺页面组件 -->
		<Page :items="items" :categoryLists="categoryLists" />
		<u-popup v-model="show" :mask-close-able="false" @close="close" @open="open" mode="center">
			<view class="agreement-box">
				<view class="agreement-title">
					欢迎使用乐享
				</view>
				<view class="agreement-content">
					感谢您信任并使用乐享APP及相关服务。我们非常重视您的个人信息和隐私保护，为了更好地保障您的个人权益，根据有关的法律法规、政策要求及业务实际情况，我们制定了《隐私政策》，您可以通过《隐私政策》详细了解我们如何收集、使用、保护您的个人信息。<br>
					在您继续使用乐享APP及相关服务之前，请务必谨慎阅读《服务协议》、《隐私政策》各项条款，尤其是：<br>
					我们对您的个人信息的收集/保存/使用/对外提供/保护等规则条款，以及您的用户权利等条款；
				</view>
				<view class="agreement-bottom">
					查看完整版<text @click="toServiceAgreemant">服务协议</text>、<text @click="toPrivacyPolicy">隐私政策</text>
				</view>
				<view class="agreement-oppose" @click="onOppose">
					不同意
					<image style="width: 18px; height: 18px;" src="@/static/no-right.png" mode=""></image>
				</view>
				<view class="agreement-btn" @click="onAgree">
					同意并继续
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		setCartTabBadge
	} from '@/core/app'
	import * as Api from '@/api/page'
	import * as CategoryApi from '@/api/category'
	import Page from '@/components/page'

	const App = getApp()

	export default {
		components: {
			Page
		},
		data() {
			return {
				// 页面参数
				options: {},
				// 页面属性
				page: {},
				// 页面元素
				items: [],
				// 分类数据
				categoryLists: [],
				show: false
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			const isAgree = uni.getStorageSync('isAgree');
			if (!isAgree || isAgree === 'false') {
				this.show = true;
			}
			// 当前页面参数
			this.options = options
			// 加载页面数据
			this.getPageData();
			this.getCategoryData();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 更新购物车角标
			setCartTabBadge()
		},

		methods: {
			// 点击不同意
			onOppose() {
				plus.runtime.quit();
			},
			// 点击用户协议
			toServiceAgreemant() {
				this.$navTo('pages/login/components/service-agreement')
			},
			// 点击隐私政策
			toPrivacyPolicy() {
				this.$navTo('pages/login/components/privacy-policy')
			},
			// 点击同意按钮
			onAgree() {
				uni.setStorageSync('isAgree', 'true');
				this.show = false;
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},

			/**
			 * 加载页面数据
			 * @param {Object} callback
			 */
			getPageData(callback) {
				const app = this
				const pageId = app.options.pageId || 0
				Api.detail(pageId)
					.then(result => {
						// 设置页面数据
						const {
							data: {
								pageData
							}
						} = result
						app.page = pageData.page
						app.items = pageData.items
						// 设置顶部导航栏栏
						app.setPageBar();
					})
					.finally(() => callback && callback())
			},
			/**
			 * 加载分类数据
			 */
			getCategoryData() {
				const app = this
				CategoryApi.list()
					.then(result => {
						this.categoryLists = result.data.list;
					})
					.finally(() => {})
			},

			/**
			 * 设置顶部导航栏
			 */
			setPageBar() {
				const {
					page
				} = this
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: page.params.title
				});
				// 设置navbar标题、颜色
				uni.setNavigationBarColor({
					frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
					backgroundColor: page.style.titleBackgroundColor
				})
			},

		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.share_title,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.share_title,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		background: #fff;
	}

	.agreement-box {
		max-height: 100%;
		margin: 0 32px;
		padding: 15px 0;

		.agreement-title {
			font-size: 20px;
			font-weight: 700;
			text-align: center;
			margin-bottom: 15px;
		}

		.agreement-content {
			font-size: 16px;
			color: #6b6b6b;
			padding-bottom: 10px;
			line-height: 25px;
		}

		.agreement-bottom {
			font-size: 16px;
			color: #3f3f3f;

			text {
				text-decoration: underline;
				color: #4a74d4;
			}
		}

		.agreement-oppose {
			font-size: 16px;
			color: #999;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 15px 0;
		}

		.agreement-btn {
			font-size: 18px;
			font-weight: 500;
			color: #fff;
			text-align: center;
			padding: 8px 0;
			border-radius: 6px;
			background-color: #3477fc;
		}
	}

	/deep/ .u-mode-center-box {
		margin: 0 32px;
		border-radius: 5px;
	}
</style>